<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .container {
        margin-top: 100px;
    }
    .bg-lightblue {
        background-color: lightblue;
    }
    .ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .li {
        margin: 10px 0 ;
    }
    .btn {
        width: 200px;
    }
</style>
<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="4" :offset="10">
            <div class="container">
                <el-row>
                    <div class="ul">
                        <div class="li">
                            <el-button class="btn" type="primary" round @click="jumpToAction">开始测试</el-button>
                        </div>
                        <div class="li">
                            <el-button class="btn" type="success" round @click="jumpToHistory">测试记录</el-button>
                        </div>
                        <div class="li">
                            <el-button class="btn" type="danger" round @click="jumpToStatistics">统计展示</el-button>
                        </div>
                        <div class="li">
                            <el-button class="btn" type="warning" round @click="jumpToQuestions">考题管理</el-button>
                        </div>
                        <div class="li">
                            <el-button class="btn" type="info" round>危险按钮</el-button>
                        </div>
                    </div>
                </el-row>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {visible: false}
        },
        methods: {
            jumpToQuestions() {
                window.location.href = './questionsManager.html'
            },
            jumpToHistory() {
                window.location.href = './historyList.html'
            },
            jumpToAction() {
                window.location.href = './action.html'
            },
            jumpToStatistics() {
                window.location.href = './statistics.html'
            }
        }
    })
</script>
</html>